<template>
    <div id="bigbox">
        <!-- 上面的盒子 -->
        <div id="topbox">
            <input id="inp1" type="text" placeholder="请输入商家名称"></input>
            <input id="inp2" type="text" placeholder="请输入商品名称"></input>
            <el-button @click="sousuo" :icon="Search" circle />
        </div>
        <div id="middlebox">
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商家名称</th>
                    <th>用户</th>
                    <th>操作</th>
                </tr>
                <template v-for="item in asd">
                    <tr>
                        <td>{{item.goodsName}}</td>
                        <td>{{item.shopName}}</td>
                        <td>{{item.userName}}</td>
                        <td @click="chakan(item)">查看聊天记录</td>
                    </tr>
                </template>
                <div class="foot">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        :page-count="total"
                        @current-change="pageChange"/>
                </div>
            </table>
            <el-dialog
                v-model="centerDialogVisible"
                title="添加管理员"
                width="500"
                align-center
            >
            <template v-for="item in shuzu1">
                <div id="shijian">{{item.chatTime}}</div>
                <div id="shuju8">{{item.shopName}}</div>
                <div id="shuju88">{{item.chat}}</div>
            </template>
            </el-dialog>
        </div>
    </div>
</template>
<style scoped>
    td{
        font-size:12px;
    }
    #shijian{
        font-size:8px;
    }
    #shuju8{
        font-size:12px;
    }
    #shuju88{
        margin-bottom:10%;
        font-size:10px;
    }
    #bigbox{
        width:100%;
        height:100%;
        background-color: #F5F5F5;
    }
    #topbox{
        width:90%;
        height:80px;
        margin-left:5%;
        line-height:80px;
    }
    #inp1{
        height:30px;
        width:15%;
        margin-right:1%;
        padding-left:1%;
        border-radius: 5px;
        border:0px;
        box-shadow: 1px 3px #ccc;
        outline: none;
    }
    #inp2{
        height:30px;
        width:15%;
        margin-right:1%;
        padding-left:1%;
        border-radius: 5px;
        border:0px;
        box-shadow: 1px 3px #ccc;
        outline: none;
    }
    .el-button.is-circle {
        border-radius: 25%;
        padding: 8px;
        width: 32px;
        position: relative;
    }
    .el-button{
        background-color: #5981E2;
        color: #fff;
        font-size:20px;
    }
    table{
        width:100%;
    }
    th,td{
        padding-top:2%;
        width:25%;
        text-align: center;
    }
    #middlebox{
        width:90%;
        height:483px;
        margin-left:5%;
        background-color: #fff;
    }
    .foot{
        width: 75%;
        height: 10%;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 41px;
    }
    .el-pagination{
        justify-content: center;
    }
</style>
<script setup>
    import {Search} from '@element-plus/icons-vue'
    import axios from 'axios';
    let centerDialogVisible = ref(false)
    let pageSize = 7;
    let currentPage = ref(1);
    let total = ref(1);
    var asd=ref([])
    var shuzu1=ref([])
    const pageChange = (newPage) => {
        currentPage.value = newPage;
        kefu();
    };
    import {onMounted, ref} from "vue";
    onMounted(()=>{
        kefu();
    })
    function kefu(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/customer/customerList`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
        }).then(function(res){
            var qwe=res.data.data.costomerList;
            total=res.data.data.pageCount;
            asd.value=qwe;
            console.log(qwe);
        })
    }
    function sousuo(){
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/customer/customerListSearch`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            shopName:inp1.value,
            goodsName:inp2.value,

        }).then(function(res){
            console.log(res);
            var qwer=res.data.data.costomerListsearch;
            console.log(qwer);
            total=res.data.data.pageCount;
            asd.value=qwer;
        })
    }
    function chakan(shuju){
        centerDialogVisible.value=true;
        axios.defaults.headers.common['token'] = localStorage.getItem("token");
        axios.post(`http://192.168.199.11:8001/ShoppingStreet/customer/costomerComment`,
        {
            pageIndex:currentPage.value,
            pageSize:pageSize,
            goodsId:shuju.goodsId,
            userId:shuju.userId,
        }).then(function(res){
            var shuzu=res.data.data.costomerCommentList;
            console.log(shuzu);
            shuzu1.value=shuzu;
        })
    }
</script>